<script setup>
import {ref} from 'vue'

const list = ref([
  {
    image: '../../../../../static/swiper/1.jpg',
    title: '蒹葭苍苍，白露为霜。所谓伊人，在水一方'
  },
  {
    image: '../../../../../static/swiper/2.jpg',
    title: '溯洄从之，道阻且长。溯游从之，宛在水中央'

  },
  {
    image: '../../../../../static/swiper/3.jpg',
    title: '蒹葭萋萋，白露未晞。所谓伊人，在水之湄'
  },
  {
    image: '../../../../../static/swiper/4.jpg',
    title: '蒹葭萋萋，白露未晞。所谓伊人，在水之湄'
  },
  {
    image: '../../../../../static/swiper/5.jpg',
    title: '蒹葭萋萋，白露未晞。所谓伊人，在水之湄'
  }
])
const modules = ref([
  {
    name: '共享预约',
    icon: '../../static/icon-order.png',
    background: '#FD5792'
  },
  {
    name: '待定',
    icon: '../../static/icon-order.png',
    background: '#65A9F8'
  },
  {
    name: '待定',
    icon: '../../static/icon-order.png',
    background: '#E08FDE'
  },
  {
    name: '待定',
    icon: '../../static/icon-order.png',
    background: '#F36B70'
  },
  {
    name: '待定',
    icon: '../../static/icon-order.png',
    background: '#7F6AD9'
  },
  {
    name: '待定',
    icon: '../../static/icon-order.png',
    background: '#D88640'
  }
])
const navigateTo = name => {
  if (name === '共享预约') {
    uni.navigateTo({
      url: '/pages/index/module/order'
    })
  }
}
</script>

<template>
  <view class="booking">
    <u-swiper
        :circular="true"
        :effect3d="true"
        :list="list"
        height="220"
        key-name="image"
        show-title
    >
    </u-swiper>
    <view class="modules">
      <view
          v-for="(module, i) in modules"
          :key="i"
          :style="{background:module.background}"
          class="module"
          @click="navigateTo(module.name)"
      >
        <image :src="module.icon" class="img"></image>
        <span class="name">{{ module.name }}</span>
      </view>
    </view>
  </view>
</template>

<style scoped>
.modules {
  width: 100%;
  height: 100%;
  margin-top: 15px;
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(3, 155px);
  grid-gap: 15px;
}

.module {
  padding: 15rpx;
  background: white;
  border-radius: 10px;
  display: flex;
  align-items: center;
  position: relative;
}

.module > .img {
  width: 30px;
  height: 30px;
}

.module > .name {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>